{% extends "ajax_imaging/base.html" %}
{% load thumbnail %}
{% block title %}My Image Archive{% endblock %}

{% block jsblock %}
<link href="{{MEDIA_URL}}stylesheets/ajax_imaging/imaging.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="{{MEDIA_URL}}stylesheets/smoothness/ui.all.css" rel="stylesheet" />
<script src="{{MEDIA_URL}}js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="{{MEDIA_URL}}js/ajax_imaging/jquery.imgareaselect-0.8.min.js" type="text/javascript"></script>
<script src="{{MEDIA_URL}}js/ajax_imaging/jquery.imaging.js" type="text/javascript"></script>
<script type="text/javascript">
//window.onload = ImageEditor.init;
$(document).ready(function(){
	ImageEditor.init();
	$("#gallery").find("li").find("img").click();
});
</script>
<style>
.gallery li {width:96px;cursor:move;float:left;margin:2px;}
.gallery h5 {margin:2px 1px 2px 1px; cursor:move;padding-left:3px;}
.gallery li .ui-icon {float:left;margin-bottom:3px;}
</style>
{% endblock %}

{% block content %}
<div id="image-editor">
	<div id="image-title"></div>
	<div id="button-panel">
		<input class="button" name="b_original" type="button" value="To original"/>
		<input class="button" name="b_save" type="button" value="Save"/>
		<input class="button" name="b_save_as" type="button" value="Save as"/>
		<input class="button" name="b_undo" type="button" value="Undo/Redo"/>
		<div stlye="clear:both;"></div>
	</div>
	<div id="button-panel">
		w:<input type="input" size="4" id="txt-width" />
		h:<input type="input" size="4" id="txt-height" />
		<input class="button" name="b_resize" type="button" value="resize"/>
		<input class="button" name="b_cw" type="button" value="90&deg; CW"/>
		<input class="button" name="b_ccw" type="button" value="90&deg; CCW"/>
		<input class="button" name="b_crop" type="button" value="crop"/>
		<div stlye="clear:both;"></div>
	</div>
	<div id="status"></div>
	<p class="image-container">
	<img id="image" src="">
	<img id="loader-image" />
	</p>
</div>
<div id="image-right-panel">
<form enctype="multipart/form-data" method="post" action="{% url image_editor_upload %}">
<dl>
{% for field in form %}
	{% if field.is_hidden %}
	{{field}}
	{% else %}
    <dt id="formlabel">{{ field.label }}</dt>
    <dd>{{ field }}</dd>
    {% if field.help_text %}<dd class="help_text">{{ field.help_text }}</dd>{% endif %}
    {% if field.errors %}<dd class="myerrors">{{ field.errors }}</dd>{% endif %}
    {% endif %}
{% endfor %}
</dl>
<input type="submit" value="Upload"/>
</form>

<form id="editform" method="post">
{% for field in editform %}
	{{ field }}
{% endfor %}
</form>
<hr>
	<div class="ui-widget ui-helper-clearfix">
	<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
	{% for img in list %}
					<li id="id-{{img.id}}" class="ui-widget-content ui-corner-tr">
	                                        <h5 class="ui-widget-header">{{img.id}}</h5>
	                                        {% thumbnail img.data "96x70" crop,upscale as thumb %}
	                                        <img onClick="ImageEditor.changeImage({{img.id}});" style="margin:0px;padding:0px;" src="{{thumb.absolute_url}}" alt="{{img}}" width="{{thumb.width}}" height="{{thumb.height}}" />
	                                        <a href="{{img.data.url}}" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
	                                        <a onClick="deleteImage(this,{{img.id}});return false;" href="{% url image_editor_delete_image img.id %}" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	                                        <div class="ui-helper-clearfix"></div>	                                      
	                                </li>
	{% endfor %}
	                        </ul>
	</div>

</div>
<div style="clear:both;"></div>
{% endblock %}